//针对log页面定义一个对象
var log = {
    startdt: "2023-11-24",
    enddt: "2023-12-24",
    updatedt: "2023-11-24",
    anchor: "IsConor"
}
//由对象派生业务逻辑
log.submit = {
    check: function (v) { //验证某个值是否为空
        var _v = (v == "") ? true : false;
        return _v;
    },
    autohide:function(obj){ //计时2秒后隐藏obj对象
        setTimeout(function(){
            obj.hide();
        },2000)
    }
}

//定义一个验证内容是否为空的函数
function checkvalue() {
    //获取元素对象并保存在变量中
    var $username = $("#username");
    var $password = $("#password");
    var $erru = $("#erru");
    var $errp = $("#errp");
    if (!log.submit.check($username.val()) && !log.submit.check($password.val())) {
        return true;
    }
    else {
        //用户名为空时
        if ($username.val() == "") {
            $erru.show();
            //2秒后自动隐藏
            log.submit.autohide($erru);
            return false;
        }
        //密码为空时
        else {
            $errp.show();
            //2秒后自动隐藏
            log.submit.autohide($errp);
            return false;
        }
    }
}

var $form = $("form");
var $btn = $(".btn>input");

// 定义一个基于列表页的业务逻辑
var lst={
    template:function(t,u,p1,p2){
        var _html = "";
        _html+='<div class="item">';
        _html+='<div class="title">';
        _html+='    <h3>'+t+'</h3>';
        _html+='</div>';
        _html+='<div class="con">';
        _html+='    <div class="cleft">';
        _html+='        <img src="'+u+'" alt="">';
        _html+='    </div>';
        _html+='    <div class="cright">';
        _html+='        <p class="ptop">';
        _html+='            &nbsp;&nbsp;'+p1;
        _html+='        </p>';
        _html+='        <p class="pbottom">';
        _html+='           '+p2;
        _html+='        </p>';
        _html+='    </div>';
        _html+='</div>';
        _html+='</div>';
        return _html;
    }
}

// 使用数组保存展示的数组
var arrData = [
    {
        t:'Python语言的优势',
        u:'imgs/c.jpg',
        p1:'我是新的内容,我是从javascript中动态加入页面中来的',
        p2:'我是有底线的'
    },
    {
        t:'web开发的优势',
        u:'imgs/b.jpg',
        p1:'我是新的内容,我是从javascript中动态加入页面中来的,我介绍的时web开发的优势',
        p2:'我是有底线的'
    },
    {
        t:'JS的优势',
        u:'imgs/a.jpg',
        p1:'我是新的内容,我是从javascript中动态加入页面中来的，介绍以下javascript的优势和语法',
        p2:'我是有底线的'
    }
]
// 遍历数组，获得每一个元素对象
// 将获取的元素对象填充到模板
// 向页面元素中追加模板元素
for(var i=0;i<arrData.length;i++){

    var tmpHTML=lst.template(arrData[i].t,arrData[i].u,arrData[i].p1,arrData[i].p2);
    $(".lst").append(tmpHTML);
}

var HTML = (lst.template("我是一个新标题","imgs/1.jpg","我是新的内容,我是从javascript中动态加入页面中来的","我是有底线的"));
$(".lst").append(HTML);

// 定义一个基于我的相册页的业务逻辑对象
var pics={
    template:function(u,n,t){
        var _html="";
        _html += '<div class="item">';
        _html += '  <div class="imgs">';
        _html += '      <img src="'+u+'" alt="">';
        _html += '      <div class="tip">喜欢 | '+n+'</div>';
        _html += '  </div>';
        _html += '  <div class="title">';
        _html += '      <h3>'+t+'</h3>';
        _html += '  </div>';
        _html += '</div>';
        return _html;
    }
}

var arrPics=[
    {
        u:'imgs/b.jpg',
        n:200,
        t:'我是第二张图片'
    },
    {
        u:'imgs/c.jpg',
        n:999,
        t:'我是第三张图片'
    },
    {
        u:'imgs/d.jpg',
        n:888,
        t:'我是最后一张图片'
    }
]

//1 遍历数组，获取每一项元素对象
for(var j=0;j<arrPics.length;j++){
    // 2 向模板中填充
    var _HTML=pics.template(arrPics[j].u,arrPics[j].n,arrPics[j].t);
    $("#pics").append(_HTML);
}